/**
 * 学习目标：React中的不可变数据
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    count: 0,
    mag: '123',
    list: [
      { id: 1, name: '123' },
      { id: 2, name: '445' },
      { id: 3, name: '789' },
    ],
  };
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => {
            return <li key={item.id}>{item.name}</li>;
          })}
        </ul>
        <button onClick={this.handel}>点我+1</button>
      </div>
    );
  }
  handel = () => {
    this.setState({
      // ...延展运算符其实就相当于把那个数组展开来
      list: [...this.state.list, { id: 4, name: '123456' }],
    });
  };
}
ReactDOM.render(<App></App>, document.getElementById('root'));
